<template>
	<view>
		<swiper class="home" autoplay circular interval="3000" indicator-dots>
			<!-- <swiper-item v-for="item in swiper" :key='item.id'>
				<image :src="item.img"></image>
			</swiper-item> -->
			<swiper-item>
				<image src="../../static/1.png"></image>
				

			</swiper-item>
			<swiper-item>
				<image src="../../static/2.png"></image>
			</swiper-item>
			<swiper-item>
				<image src="../../static/3.png"></image>
			</swiper-item>


		</swiper>
		<!-- nav -->
		<view class="nav">
			<view class="nav_item" v-for="(item,index) in nav" :key='index' @click="navTo(item.path)">
				<view :class='item.icon'></view>
				<text>{{item.title}}</text>
			</view>


		</view>
		<!-- hot -->
		<view class="hot">
			<view class="title">
				推荐商品
			</view>
			<!-- <view class="goods">

				<view class="goods_item" v-for="item in goodsList" :key='item.id'>
					<image :src="item.img_url"></image>
					<view class="price">
						<text>￥{{item.sell_price}}</text>
						<text>￥{{item.market_price}}</text>
					</view>
					<view>
						{{item.title}}
					</view>
				</view>


			</view> -->
			<goods-components @entergoodsItem='navigatorGoods' :goodsList='goodsList'></goods-components>
		</view>



	</view>
</template>

<script>
	import goodsComponents from '../../components/goodsComponents.vue'
	export default {
		components: {
			"goods-components": goodsComponents
		},
		data() {
			return {
				swiper: [],
				// swipertwo:[{
				// 	// url:"../../static/1.png"
				// 	icon:"/1.png"

				// },
				// {
				// 	icon:"../../static/2.png"

				// },
				// {
				// 	icon: "../../static/3.png"

				// }],
				goodsList: [],
				nav: [{

						icon: 'iconfont icon-ziyuan',
						title: '数码超市',
						path: '/pages/goods/goods'
					},
					{

						icon: 'icon iconfont icon-guanyuwomen',
						title: '联系我们',
						path: "/pages/contact/contact"
					},
					{

						icon: 'icon iconfont icon-tupian',
						title: '社区图片',
						path: "/pages/pics/pics"
					},
					{

						icon: 'icon iconfont icon-shipin',
						title: '产品视频',
						path: "/pages/videos/videos"
					}
				]

			}
		},
		onLoad() {
			this.getSwiper(),
				this.getGoodsList()


		},
		methods: {
			//获取轮播图
			async getSwiper() {
				const res = await uni.request({
					url: 'http://localhost:8082/api/getlunbo'
				})
				// console.log(res)
				let data = res[1].data;
				// console.log('res88:', res[1].data)


				if (data.status !== 0) {
					return uni.showToast({
						title: '返回数据失败'
					})
				} else {
					this.swiper = data.message
					// console.log(888, this.swiper)
					// console.log(this.swiper)
				}

			},
			//获取商品列表
			async getGoodsList() {
				const res = await uni.request({
					url: 'http://localhost:8082/api/getgoods?pageindex=1'
				})
				// console.log(res)
				let data = res[1].data
				// console.log(data)
				if (data.status !== 0) {
					return uni.showToast({
						title: '获取数据失败'
					})
				} else {
					this.goodsList = data.message
					// console.log(this.goodsList)
				}
			},
			//点击导航栏跳转页面
			navTo(url) {
				uni.navigateTo({
					url
				})

			},
			//跳转进入商品详情
			navigatorGoods(id) {
				uni.navigateTo({
					url: '/pages/goods/goodsDetail/goodsDetail?id=' + id
				})
			}


		}
	}
</script>

<style lang="less" scoped>
	.home {
		width: 750rpx;
		height: 300rpx;
		background: url("../../static/background.jpg") no-repeat;
		image {
			width: 100%;
			height: 100%;
		}

	}

	.nav {
		display: flex;

		.nav_item {
			width: 25%;
			text-align: center;

			view {
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
				background: #b50e03;
				margin: 20rpx auto;
				line-height: 120rpx;
				color: #eee;
				font-size: 50rpx;
			}

			text {
				font-size: 30rpx;
			}

		}
	}

	.hot {
		background: #F5F2F0;
		overflow: hidden;
		margin-top: 20rpx;

		.title {
			height: 100rpx;
			line-height: 100rpx;
			background: #fff;
			margin: 10rpx 0;
			text-align: center;
			letter-spacing: 30rpx;
			font-size: 50rpx;
			color: #b50e03;
		}



	}
</style>
